<template>
	<view class="topic-container">
		<!-- 话题介绍 -->
		<topicInfo :topicInfo="info"/>
		<!-- tabbar切换 -->
		<swiperTabHead 
		ref="swiperTabHeadRef" 
		:tabBars="tabBars" 
		v-model:tabBarsIndex="isguanzhu"
		:itemStyle="{
			'box-sizing': 'border-box',
			'width': '50%',
			'text-align': 'center',
			'margin':'0'}"/>
		<!-- 列表 -->
		<!-- 关注 -->
		<commonList v-for="(item2,index1) in newList[isguanzhu].list" :item="item2" :key="index1"/>
		<!-- 上拉加载 -->
		<loadMore :loadingText="newList[isguanzhu].loadingText"></loadMore>
	</view>
</template>

<script setup>
	import topicInfo from '../../component/common/topic/topic-info.vue';
	import swiperTabHead from '../../component/index/swiper-tab-head.vue';
	import commonList from '../../component/common/comm-list.vue';
	import loadMore from '../../component/common/load-more.vue';
	import {ref,reactive,onMounted} from 'vue';
	import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app';
	import {getPostByTopicApi} from '../../api/postApi.js'
	const info = reactive({
		titlepic:"../../static/new.jpg",
		title:"亿往事,敬余生",
		desc:"面试官:在电梯里巧云马云你会做什么?90后女孩的回答当场被录用",
		totalnum:793,
		todaynum:641,
	})
	// tabbar切换索引
	
	const swiperTabHeadRef = ref();
	const id=ref(0)
	// tabbar切换
	const tabBars = reactive([{
					classname: '默认',
					id: 'moran'
				}, {
					classname: '最新',
					id: 'zuixing'
				}])
				
	// 页面数据
	const newList = reactive([
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			
		},
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			
		},
	]);
	
	// 选中页面
	const isguanzhu = ref(0)
	
	// swiper滑动事件
	function changeSwiper(e){
		isguanzhu.value = e.detail.current;
		swiperTabHeadRef.value.switchTabbar(null,isguanzhu.value);
	}
	
	// 上拉加载方法
	function scollBottom(index){
		// 判断是否在加载
		if(newList[index].loadingText!="上拉加载更多")return;
		newList[index].loadingText = "加载中~~";	
		getDetails(true,index);
	}
	
	
	function getDetails(isLoading,index){
		if(isLoading){
			getPostByTopicApi(id.value,++newList[index].page).then(res=>{
				newList[0].list.push(...res)
				if(res.length<=0){
					newList[index].loadingText="没有更多数据了"
				}else {
					newList[index].loadingText="上拉加载更多"
				}
				
				console.log(res)
			}).catch(e=>{
				newList[index].loadingText="上拉加载更多"
			})
		}else {
			getPostByTopicApi(id.value,1).then(res=>{
					newList[isguanzhu.value].list.push(...res)
			})
		}
	}
	
	
	onMounted(()=>{
		swiperTabHeadRef.value.switchTabbar(null,0);
	})
	
	onLoad((e)=>{
		const item = JSON.parse(e.item)
		id.value = item.id;
		info.title = item.title;
		info.titlepic = item.titlepic;
		info.desc = item.desc;
		getDetails()
	})
	
	// 上拉触底
	onReachBottom(()=>{
		scollBottom(isguanzhu.value);
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		getPostByTopicApi(id.value,1).then(res=>{
				newList[0].list.splice(0,newList[0].length);
				newList[0].list.push(...res)
				uni.stopPullDownRefresh();
		}).catch(e=>{
			uni.stopPullDownRefresh();
		})
		
	})
</script>

<style lang="scss" scoped>
	.topic-container{
		min-height: 100%;
		// display: flex;
		// flex-direction: column;
	}
	.swiper__list {
		// flex:1;
		min-height: 500px;
	}
</style>
